<template>
  <div>
    <avue-crud
      ref="tableRef"
      v-model="form"
      v-model:search="searchform"
      v-model:page="page"
      :option="option"
      :table-loading="loading"
      :data="data"
      :before-open="beforeOpen"
      @search-change="searchChange"
      @search-reset="searchReset"
      @refresh-change="refreshChange"
      @selection-change="selectionChange"
      @current-change="currentChange"
      @size-change="sizeChange"
      @row-update="rowUpdate"
      @row-save="rowSave"
      @row-del="rowDel"
      @on-load="onLoad"
    >
      <template #menu-left="{ row }">
        <el-button type="primary">新增</el-button>
      </template>
      <template #menu="{ row }"></template>
    </avue-crud>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
// hooks
import useTableOpt from '@/hooks/crud/useTableOption';
import useCRUDTable from '@/hooks/crud/useCRUDTable'; //  crud通用方法和变量

import { addRole, changeRoleStatus, dataScope, delRole, getRole, listRole, updateRole, deptTreeSelect } from '@/api/system/role';

//权限
const permissionList = computed((row) => {
  return {};
});

/**
 * CRUD Table
 */
const searchform = ref({});
const crudOptions = {
  fetch: listRole,
  requestOption: {},
  paramsPreFixFn: (search) => {
    console.log(search);
  },
  cudOptions: {
    // cRequest: certificateSafetyAdd,
    // uRequest: certificateSafetyEdit,
    // dRequest: certificateSafetyDel,
    // beforCReqFunc: (row) => formatterRow(row),
    // beforUReqFunc: (row) => formatterRow(row),
    failIsOpen: true, // 后端报错后不关闭弹窗
  },
};
const { defaultOpt } = useTableOpt();
const {
  tableRef,
  form,
  currentChange,
  sizeChange,
  page,
  onLoad,
  data,
  loading,
  searchChange,
  searchReset,
  query,
  permission,
  roles,
  selectionChange,
  selectionList,
  ids,
  rowDel,
  rowSave,
  rowUpdate,
} = useCRUDTable(crudOptions);

const option = ref({
  ...defaultOpt,
  addBtn:false,
  column: [
    {
      label: '任务编号',
      prop: 'licensePlateNumber',
      overHidden: true,
      rules: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
    },
    {
      label: '任务责任人',
      prop: 'licensePlateNumber',
      overHidden: true,
      search: true,
      searchSpan: 6,
      rules: [{ required: true, message: '请输入车牌号码', trigger: 'blur' }],
    },
    {
      label: '任务名称',
      prop: 'driverName',
      overHidden: true,
      search: true,
      searchSpan: 6,
      rules: [{ required: true, message: '请输入驾驶员姓名', trigger: 'blur' }],
    },
    {
      label: '任务类型',
      prop: 'isBlacklisted',
      overHidden: true,
      search: true,
      type: 'select',
      dicData: [
        { label: '是', value: 1 },
        { label: '否', value: 0 },
      ],
      rules: [{ required: true, message: '请输入是否是黑名单', trigger: 'blur' }],
    },
    {
      label: '任务状态',
      prop: 'applicationId',
      overHidden: true,
      rules: [{ required: true, message: '请输入关联申请单', trigger: 'blur' }],
    },

    {
      label: '创建时间',
      prop: 'planedEntryTime',
      overHidden: true,
      rules: [{ required: true, message: '请输入计划进入时间', trigger: 'blur' }],
    },
  ],
});

/**
 * 批量删除
 */

const handleDelete = () => {
  if (selectionList.value.length === 0) {
    ElMessage.warning('请选择至少一条数据');
    return;
  }
  ElMessageBox.confirm('确定将选择数据删除?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      return authvehicleauthorization_remove(ids.value);
    })
    .then(() => {
      onLoad(page);
      ElMessage({
        type: 'success',
        message: '操作成功!',
      });
      crudRef.value.toggleSelection();
    });
};

const beforeOpen = (done, type) => {
  if (['view'].includes(type)) {
    authvehicleauthorization_detail({ id: form.value.id }).then((res) => {
      form.value = res.data;
    });
  }
  done();
};

onMounted(() => {});
</script>

<style lang="scss" scoped></style>
